<template>
  <div id="filterSetting">
    <continer>
      <template slot="search">
        <span class="header-title">过滤器设置</span>
      </template>
      <template slot="oprate">
        <div class="config-header">
          <div style="float: right;color: #008BEE">
            <i class="V7_iconfont V7_iconV7tubiao_xinzeng"></i>
            <el-button  type="text" @click.stop="addBtnFun">新增过滤器</el-button>
          </div>
        </div>
      </template>
      <template slot="content">
          <el-table
            :data="queueTableData"
            style="width: 100%;margin-top: 25px;">
              <template v-for="(item, index) in queueTableHeader">
                <el-table-column
                  v-if="item.custom"
                  :key="index"
                  :label="item.label"
                >
                  <template slot-scope="scope">
                    <span class="opera-span" @click.stop="handleEdit(scope.row)">配置</span>
                    <span class="opera-span danger" @click.stop="switchStatus(scope.row, 0)" v-if="scope.row.status === 1">停用</span>
                    <span class="opera-span" @click.stop="switchStatus(scope.row, 1)" v-if="scope.row.status === 0">启用</span>
                    <span class="opera-span danger" v-if="scope.row.type === 2"  @click.stop="handleDel(scope.row)">删除</span>
                  </template>
                </el-table-column>
                <el-table-column
                  v-else-if="item.isDictionary"
                  :key="index"
                  :label="item.label"
                >
                  <template slot-scope="scope">
                    <span v-show="item.showStatusIcon">
                      <i
                        class="V7_iconfont"
                        :class="item.dictionary[scope.row[item.prop]].iconClass"
                        style="font-size: 12px"
                      ></i>
                    </span><span :class="item.dictionary[scope.row[item.prop]].class">{{ item.dictionary[scope.row[item.prop]].name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  v-else
                  :key="index"
                  :prop="item.prop"
                  :label="item.label">
                </el-table-column>
              </template>
          </el-table>
      </template>
    </continer>
    <drawer
      :title="drawTitle"
      :drawer="drwaShow"
      size="600px"
      :saveBtnText="'保存'"
      @cancelFun="cancelFun()"
      @closeDraw="cancelFun()"
      @save="saveConfirm"
    >
      <template slot="column">
        <editFilterSetting ref="addFilterSetting" @success="success"></editFilterSetting>
      </template>
    </drawer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue';
import editFilterSetting from './editFilterSetting.vue';
import { deepClone, commonAction } from '@/utils/common'
import drawer from '@/common/views/drawer/index.vue';
import { CommonModule } from '@/store/modules/common'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore';
@Component({
  name: 'filterSetting',
  components: {
    continer,
    drawer,
    editFilterSetting
  }
})
export default class FilterSetting extends Vue {
  [x: string]: any
  private $route: any;

  private drawTitle = '新增自定义过滤器';
  private drwaShow: boolean = false;
  private queueTableData = []

  public statusMap = Object.freeze({
    1: { name: '启用', iconClass: 'green-color V7_iconV7tubiao_dian', class: 'textGreen' },
    0: { name: '停用', iconClass: 'red-color V7_iconV7tubiao_dian', class: 'textRed' }
  })

  public typeMap = Object.freeze({
    1: { name: '内置' },
    2: { name: '自定义' }
  })

  private queueTableHeader: any[] = [ // 表头
    { label: '过滤器名称', prop: 'name' },
    { label: '类型', prop: 'type', isDictionary: true, dictionary: this.typeMap },
    { label: '创建时间', prop: 'createTime' },
    { label: '更新时间', prop: 'updateTime' },
    { label: '更新人', prop: 'updateUser' },
    { label: '状态', prop: 'status', isDictionary: true, dictionary: this.statusMap, showStatusIcon: true },
    { label: '操作', prop: 'oper', custom: true }
  ]

  // 新增
  private addBtnFun () {
    this.drwaShow = true;
    this.drawTitle = '新增自定义过滤器'
    this.$nextTick(() => {
      (this.$refs as any).addFilterSetting.init({ type: 2 })
    })
  }

  // 关闭抽屉
  private cancelFun () {
    this.drwaShow = false;
  }

  // 编辑
  private handleEdit (row: any) {
    commonAction({ url: '/server-work/action/filter/config/search', method: 'post', data: { id: row.id } }).then(res => {
      if (res.success) {
        this.drwaShow = true
        this.drawTitle = '修改过滤器'
        this.$nextTick(() => {
          (this.$refs as any).addFilterSetting.init(res.data)
        })
      }
    })
  }

  // 删除
  private handleDel (row: any) {
    if (row.status === 1) {
      this.$message.warning('请先停止过滤器后再删除！')
      return
    }
    this.$confirm('确定要删除该过滤器么吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      commonAction({ url: '/server-work/action/filter/config/delete/' + row.id, method: 'get' }).then(res => {
        if (res.success) {
          this.$message.success('删除！')
          this.fetchData()
        }
      })
    })
  }

  // 停用/启用
  private switchStatus (row: any, status: number) {
    const params = {
      id: row.id,
      status
    }
    this.$confirm(`确定要${status === 0 ? '停用' : '启用'}过滤器吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      commonAction({ url: '/server-work/action/filter/config/switch', method: 'post', data: params }).then(res => {
        if (res.success) {
          this.$message.success('变更过滤器状态成功！')
          this.fetchData()
        }
      })
    })
  }

  private saveConfirm () {
    (this.$refs as any).addFilterSetting.saveConfirm()
  }

  private success () {
    // this.id = ''
    this.drwaShow = false
    this.fetchData()
  }

  private async getSheetConfig () {
    const data = { modelId: this.$route.params.businessId, queryFieldType: 1 }
    commonAction({ url: '/server-work/action/workOrderModel/getConfig', method: 'post', data }).then(res => {
      if (res.success) {
        busConfigStore.list = res.data.fields || [];
      }
    })
  }

  private fetchData () {
    commonAction({ url: '/server-work/action/filter/config/list', method: 'post', data: { modelId: this.$route.params.businessId } }).then(res => {
      if (res.success) {
        this.queueTableData = res.data
        this.queueTableData.forEach((item: any) => {
          const agentObj = deepClone(CommonModule.publicCache.userListObj)[item.updateUser]
          item.updateUser = agentObj ? agentObj.name : '--'
        })
      }
    })
  }

  private beforeMount () {
    this.getSheetConfig()
    this.fetchData()
  }
}
</script>

<style lang="stylus" scoped>
#filterSetting
  font-size: 12px;
  height: 100%
  overflow: auto
  .header-title
    font-family: 'PingFang SC'
    font-style: normal
    font-weight: 500
    font-size: 14px
    line-height: 20px
    color: #303753
  .config-header
    height 20px
    margin 10px 0
  .green-color
    color $c-green
  .red-color
    color $c-danger
  .opera-span
    color $c-main
    margin-right 10px
    cursor pointer
  .danger, .red-color
    color $c-danger
  /deep/ .handle-wrapper
    margin 0
  /deep/ .shadow
    border none
    box-shadow none
  /deep/ .handle-wrapper-header
    padding 0
  /deep/ .content
    padding 0
  /deep/ .header-contain
    border none
    height: 22px;
  .textGreen
    color: #2ed47a
  .textRed
    color: #fc6c5c
  .V7_iconV7tubiao_xinzeng
    font-size: 12px
    margin-right: 5px
  /deep/ .has-gutter,.el-table__body-wrapper
    font-size: 12px
  /deep/ .drawer-contain
    padding: 20px 24px
  /deep/ .el-drawer__header
    box-shadow: none
    border-bottom: 1px solid #ECF0F3;
</style>
